<template>
  <a-modal
    v-model:visible="visible"
    simple
    :footer="false"
    modal-class="!p-0px !rounded-16px"
    hide-title
  >
    <div class="w-400px h-600px bg-white rounded-16px overflow-hidden relative z-0">
      <div
        class="absolute top-0 inset-x-0 w-full h-64px bg-gradient-to-b from-#FFE8F5 to-#FFFFFF z-[-1]"
      ></div>
      <div class="mt-24px mx-18px h-24px flex flex-row justify-between items-center">
        <div class="h-24px text-24px leading-24px font-bold text-#242633">礼物榜</div>
        <div class="flex-1"></div>
        <button class="flex flex-row items-center w-24px h-24px" @click="visible = false">
          <img src="@/assets/close.png" alt="" class="w-full h-full" />
        </button>
      </div>
      <div class="mt-8px mb-12px mx-18px h-12px leading-12px text-#8A8C99">
        收集 <span style="margin-right: 3px; color: #ffda00">{{ total }}</span> 种礼物
      </div>
      <div class="w-full h-520px overflow-y-scroll no-scrollbar" v-if="data.length > 0">
        <div
          class="mb-12px w-[fit-content] px-7px box-border flex flex-row items-start justify-start flex-wrap"
        >
          <div class="mt-12px mx-9px w-78px flex flex-col items-center" v-for="item in data">
            <div class="w-78px h-78px bg-[#FFF8ED] rounded-12px p-14px box-border">
              <img :src="item.image_cover" alt="" class="w-full h-full" />
            </div>
            <div class="mt-4px w-full text-12px leading-13px text-#525566 text-center truncate">
              {{ item.name }}
            </div>
            <div class="mt-6px text-12px text-#8A8C99">x {{ item.number }}</div>
          </div>
        </div>
      </div>
      <empty v-else />
    </div>
  </a-modal>
</template>
<script setup>
import { ref } from 'vue'
import { useVModel } from '@vueuse/core'
import Empty from '@/components/empty/index.vue'
const props = defineProps(['visible', 'data', 'total'])
const emits = defineEmits(['update:visible'])
const visible = useVModel(props, 'visible', emits)
</script>
<style lang="less" scoped></style>
